/* ==========================================================================
   Prise de rendez-vous — palette ADAPTÉE à ce thème (VL_CYCLO_2024_TEST
   AUTONOME), contrairement à VL_2026 dont la palette est volontairement
   neutre/générique. Reprend les couleurs de marque du thème lui-même
   (css/style.css : --primary #06A3DA cyan, --secondary #34AD54 vert,
   --light #EEF9FF, --dark #091E3E marine) plutôt qu'une palette neutre.
   Palette d'origine (VL_2026, gris ardoise/doré) gardée en commentaire à
   la fin de ce bloc au cas où il faille repartir de la version neutre.
   ========================================================================== */

:root {
    --rdv-ink: #091E3E;
    --rdv-ink-rgb: 9, 30, 62;
    --rdv-ink-2: #0F2A4D;
    --rdv-body: #4A5C72;
    --rdv-heading: #091E3E;
    --rdv-border: #DCEAF2;
    --rdv-surface: #EEF9FF;
    --rdv-white: #FFFFFF;
    --rdv-muted: #7C8A99;
    /* Vert promo/disponibilité : directement le vert de marque du thème
       (--secondary, css/style.css) — sert à faire ressortir les créneaux
       en promotion et les étapes validées. */
    --rdv-ok: #34AD54;
    --rdv-ok-rgb: 52, 173, 84;
    --rdv-ok-050: #E7F7EB;
    --rdv-warn: #C0392B;
    --rdv-warn-050: #FBEAE7;

    /* Bleu utilitaire — quatrième teinte, réservée aux badges d'icône des
       prestations "véhicules spéciaux" (camping-car, 4x4, pollution), pour
       varier la grille de prestations plutôt que de garder un badge gris
       uniforme sur les 8 cartes (voir NATURE_COULEURS, rendez-vous-en-ligne.js).
       Bleu moyen distinct du cyan de --rdv-accent et du marine de --rdv-ink. */
    --rdv-blue: #2D6CA6;
    --rdv-blue-rgb: 45, 108, 166;
    --rdv-blue-600: #1F4E7D;
    --rdv-blue-050: #E5EFF6;

    /* Couleur d'accent : le cyan de marque du thème (--primary,
       css/style.css), réservée aux éléments qui guident l'action (bouton
       principal, étape active, sélections) — jamais pour du texte ou des
       fonds neutres. --rdv-accent-050 reprend directement --light. */
    --rdv-accent: #06A3DA;
    --rdv-accent-rgb: 6, 163, 218;
    --rdv-accent-600: #057FAA;
    --rdv-accent-050: #EEF9FF;
    --rdv-accent-dark: #045C7D;

    /* Troisième teinte, chaude celle-ci : réservée aux moments qui parlent
       de valeur/urgence (total à payer, minuteur de réservation), pour ne
       pas rester sur le seul duo cyan/vert — et à la carte "Moto" de
       l'étape véhicule, pour la distinguer visuellement de "Voiture".
       Le thème n'a pas de teinte chaude propre : ambre choisi pour
       contraster proprement avec le cyan/vert/marine ci-dessus. */
    --rdv-gold: #F2A93B;
    --rdv-gold-rgb: 242, 169, 59;
    --rdv-gold-600: #D08A1F;
    --rdv-gold-050: #FEF3E0;

    /* Rubik/Nunito : polices déjà chargées par ce thème (voir header.tpl),
       contrairement à Archivo/Manrope (VL_2026). JetBrains Mono non chargé
       ici, d'où le repli direct sur la police mono système. */
    --rdv-font-display: var(--ct-font-display, 'Rubik', system-ui, sans-serif);
    --rdv-font-body: var(--ct-font-body, 'Nunito', system-ui, sans-serif);
    --rdv-font-mono: var(--ct-font-mono, ui-monospace, monospace);

    /* Palette VL_2026 d'origine (neutre, gris ardoise/doré) — au cas où :
       --rdv-ink: #16181B; --rdv-ink-rgb: 22, 24, 27; --rdv-ink-2: #1F2226; --rdv-body: #5B5F66; --rdv-heading: #16181B; --rdv-border: #E3E4E6; --rdv-surface: #F5F5F6; --rdv-muted: #9A9DA3;
       --rdv-ok: #17B961; --rdv-ok-rgb: 23, 185, 97; --rdv-ok-050: #E1F8EC;
       --rdv-blue: #3E7CB1; --rdv-blue-rgb: 62, 124, 177; --rdv-blue-600: #2E5F8A; --rdv-blue-050: #E7F0F7;
       --rdv-accent: #33414D; --rdv-accent-rgb: 51, 65, 77; --rdv-accent-600: #212B33; --rdv-accent-050: #E7ECEE; --rdv-accent-dark: #1B242A;
       --rdv-gold: #E8A33D; --rdv-gold-rgb: 232, 163, 61; --rdv-gold-600: #C6821F; --rdv-gold-050: #FDF3E3; */

    --r-sm: 10px;
    --r: 16px;
    --r-lg: 22px;
    --shadow-sm: 0 8px 20px -14px rgba(var(--rdv-ink-rgb), .25);
    --shadow: 0 24px 48px -20px rgba(var(--rdv-ink-rgb), .22);
    --shadow-lg: 0 40px 90px -30px rgba(var(--rdv-accent-rgb), .35);
    --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* --------------------------------------------------------------------------
   Bannière "page-hero" (titre + fil d'Ariane) — normalement stylée par le
   style.css global de VL_2026 (jamais copié ici, ce n'est pas censé être
   une dépendance de cette seule page). Sans ce bloc, aucune marge ne
   dégageait ce titre de la nav de CE thème, qui est en position absolute/
   fixed sur desktop (≥992px, voir css/style.css) pour flotter par-dessus
   la bannière d'accueil — d'où le chevauchement. Valeurs adaptées à ce
   thème (couleurs --dark/--primary, marge calquée sur le padding déjà
   utilisé par les autres pages intérieures pour dégager cette même nav,
   voir contact.tpl : "py-5 mb-5" + "pt-lg-5 mt-lg-5").
   -------------------------------------------------------------------------- */
.page-hero {
    position: relative;
    padding: 11rem 0 3.5rem;
    background: var(--dark, #091E3E) center/cover no-repeat;
    color: #fff;
    overflow: hidden;
}
@media (max-width: 991.98px) {
    /* La nav de ce thème redevient position:relative sous 992px (voir
       css/style.css) : plus besoin de la marge de dégagement desktop. */
    .page-hero { padding: 3rem 0 2rem; }
}
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(9, 30, 62, .85) 0%, rgba(6, 163, 218, .35) 100%);
}
.page-hero__inner { position: relative; z-index: 2; }
.page-hero h1 {
    color: #fff;
    font-family: var(--rdv-font-display);
    font-size: clamp(1.9rem, 4.6vw, 3.1rem);
    font-weight: 800;
    margin-bottom: .65rem;
}
.page-hero p { color: rgba(255, 255, 255, .78); max-width: 58ch; margin: 0; }
.breadcrumb-ct {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    font-family: var(--rdv-font-mono);
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 1.1rem;
}
.breadcrumb-ct a { color: rgba(255, 255, 255, .8); }
.breadcrumb-ct a:hover { color: var(--rdv-gold); }

.rdv-wrap {
    font-family: var(--rdv-font-body);
    color: var(--rdv-body);
    line-height: 1.6;
    /* background:
        radial-gradient(120% 55% at 15% 0%, var(--rdv-accent-050) 0%, transparent 60%),
        radial-gradient(100% 65% at 100% 100%, var(--rdv-ok-050) 0%, transparent 55%); */
}
.rdv-wrap h1, .rdv-wrap h2, .rdv-wrap h3 {
    font-family: var(--rdv-font-display); color: var(--rdv-heading);
    font-weight: 800; margin: 0; letter-spacing: -.01em;
}
.rdv-wrap button { font-family: inherit; }

/* --------------------------------------------------------------------------
   Structure générale : carte principale + colonne latérale
   -------------------------------------------------------------------------- */
.rdv-notice {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--rdv-accent-050); border: 1px solid #D3DAE8; border-radius: var(--r);
    padding: 14px 18px; margin-bottom: 18px; font-size: .88rem; color: var(--rdv-accent-dark);
}
.rdv-notice i { color: var(--rdv-accent); font-size: 1.1rem; margin-top: .1rem; flex: none; }
.rdv-notice strong { display: block; margin-bottom: .2rem; color: var(--rdv-heading); }

.rdv-layout { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; }
@media (max-width: 900px) { .rdv-layout { grid-template-columns: 1fr; } }

.rdv-shell {
    background: var(--rdv-white);
    border: 1px solid var(--rdv-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
}
.rdv-shell::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 5px;
    background: linear-gradient(90deg, var(--rdv-accent) 0%, var(--rdv-accent) 40%, #6B8FB0 75%, var(--rdv-ok) 100%);
}
@media (max-width: 480px) {
    .rdv-shell { border-radius: var(--r); border-left: none; border-right: none; }
}

/* --------------------------------------------------------------------------
   Fil de progression — cliquable pour revenir sur une étape déjà validée
   -------------------------------------------------------------------------- */
.rdv-steps { position: relative; display: flex; padding: 24px 32px 20px; }
.rdv-steps::before {
    content: ""; position: absolute; left: 46px; right: 46px; top: 37px; height: 2px;
    background: var(--rdv-border);
}
.rdv-steps__fill {
    position: absolute; left: 46px; top: 37px; height: 2px;
    background: linear-gradient(90deg, var(--rdv-ok), var(--rdv-accent)); width: 0%; transition: width .5s var(--ease);
}
.rdv-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; z-index: 1; }
.rdv-step__dot {
    width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--rdv-font-mono); font-size: .74rem; font-weight: 700;
    background: var(--rdv-white); border: 2px solid #C7CEDB; color: var(--rdv-accent);
    transition: all .3s var(--ease);
}
.rdv-step__label { font-size: .72rem; font-weight: 700; color: var(--rdv-muted); text-align: center; transition: color .3s ease; }
.rdv-step.is-active .rdv-step__dot { background: var(--rdv-accent); border-color: var(--rdv-accent); color: #fff; transform: scale(1.1); box-shadow: 0 0 0 4px var(--rdv-accent-050); }
.rdv-step.is-active .rdv-step__label { color: var(--rdv-heading); }
.rdv-step.is-done .rdv-step__dot { background: var(--rdv-ok); border-color: var(--rdv-ok); color: #fff; }
.rdv-step.is-done .rdv-step__label { color: var(--rdv-body); }
.rdv-step.is-clickable { cursor: pointer; }
.rdv-step.is-clickable:hover .rdv-step__dot { background: var(--rdv-accent); border-color: var(--rdv-accent); color: #fff; }
.rdv-step.is-clickable:focus-visible .rdv-step__dot { outline: 2px solid var(--rdv-accent); outline-offset: 2px; }
@media (max-width: 575.98px) {
    .rdv-step__label { display: none; }
    .rdv-steps { padding: 18px 16px 14px; }
    .rdv-steps::before, .rdv-steps__fill { left: 22px; right: 22px; }
    .rdv-step__dot { width: 26px; height: 26px; }
}

/* --------------------------------------------------------------------------
   Corps
   -------------------------------------------------------------------------- */
.rdv-body { padding: 6px 32px 28px; min-height: 400px; }
@media (max-width: 575.98px) { .rdv-body { padding: 4px 16px 22px; } }

.rdv-panel { display: none; }
.rdv-panel.is-active { display: block; animation: panelIn .4s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.rdv-panel__head { margin-bottom: 20px; }
.rdv-panel__eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--rdv-font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--rdv-accent-dark); background: var(--rdv-accent-050);
    padding: 4px 10px; border-radius: 999px; margin-bottom: 9px;
}
.rdv-panel h2 { font-size: 1.22rem; margin-bottom: 4px; }
.rdv-panel__sub { margin: 0; font-size: .9rem; color: var(--rdv-body); }

/* --- Étape 1 : natures --- */
.nature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
@media (max-width: 480px) { .nature-grid { grid-template-columns: 1fr; } }
.nature-card {
    position: relative; display: flex; flex-direction: column; gap: 12px;
    text-align: left; padding: 20px 18px;
    border: 1.5px solid var(--rdv-border); border-radius: var(--r);
    background: var(--rdv-white); cursor: pointer;
    transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.nature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: #C9CACD; }
.nature-card.is-selected {
    border-color: var(--rdv-accent); box-shadow: 0 0 0 3px var(--rdv-accent-050);
    background: linear-gradient(160deg, var(--rdv-accent-050) 0%, var(--rdv-white) 55%);
}
.nature-card__top { display: flex; align-items: flex-start; justify-content: space-between; }
.nature-card__icon {
    width: 52px; height: 52px; border-radius: 15px;
    display: grid; place-items: center;
    background: linear-gradient(155deg, var(--rdv-accent-050), #E2E7F0);
    color: var(--rdv-accent); font-size: 1.4rem;
    transition: all .3s var(--ease);
}
.nature-card.is-selected .nature-card__icon {
    background: linear-gradient(155deg, var(--rdv-accent), var(--rdv-accent-600));
    color: #fff; transform: scale(1.05) rotate(-4deg);
    box-shadow: 0 8px 16px -6px rgba(var(--rdv-accent-rgb), .5);
}
.nature-card__check {
    width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--rdv-border);
    display: grid; place-items: center; color: transparent; font-size: .7rem;
    transition: all .2s ease; flex: none;
}
.nature-card.is-selected .nature-card__check { background: var(--rdv-ok); border-color: var(--rdv-ok); color: #fff; }
.nature-card__name { font-family: var(--rdv-font-display); font-weight: 800; font-size: .98rem; color: var(--rdv-heading); }
.nature-card__hint { font-size: .78rem; color: var(--rdv-muted); margin: 0; }

/* Variété de couleurs sur les badges d'icône — sans ça, les 8 cartes de
   prestations restent toutes dans le même gris ardoise clair, ce qui rend
   la grille terne. Voir NATURE_COULEURS dans rendez-vous-en-ligne.js pour
   savoir quelle nature reçoit quelle teinte. */
.nature-card--or .nature-card__icon { background: linear-gradient(155deg, var(--rdv-gold-050), #F5E2C4); color: var(--rdv-gold-600); }
.nature-card--or.is-selected .nature-card__icon { background: linear-gradient(155deg, var(--rdv-gold), var(--rdv-gold-600)); box-shadow: 0 8px 16px -6px rgba(var(--rdv-gold-rgb), .5); }
.nature-card--or.is-selected { border-color: var(--rdv-gold); box-shadow: 0 0 0 3px var(--rdv-gold-050); background: linear-gradient(160deg, var(--rdv-gold-050) 0%, var(--rdv-white) 55%); }

.nature-card--vert .nature-card__icon { background: linear-gradient(155deg, var(--rdv-ok-050), #BFEED6); color: var(--rdv-ok); }
.nature-card--vert.is-selected .nature-card__icon { background: linear-gradient(155deg, var(--rdv-ok), #0E9A50); box-shadow: 0 8px 16px -6px rgba(var(--rdv-ok-rgb), .5); }
.nature-card--vert.is-selected { border-color: var(--rdv-ok); box-shadow: 0 0 0 3px var(--rdv-ok-050); background: linear-gradient(160deg, var(--rdv-ok-050) 0%, var(--rdv-white) 55%); }

.nature-card--bleu .nature-card__icon { background: linear-gradient(155deg, var(--rdv-blue-050), #CFE0EE); color: var(--rdv-blue); }
.nature-card--bleu.is-selected .nature-card__icon { background: linear-gradient(155deg, var(--rdv-blue), var(--rdv-blue-600)); box-shadow: 0 8px 16px -6px rgba(var(--rdv-blue-rgb), .5); }
.nature-card--bleu.is-selected { border-color: var(--rdv-blue); box-shadow: 0 0 0 3px var(--rdv-blue-050); background: linear-gradient(160deg, var(--rdv-blue-050) 0%, var(--rdv-white) 55%); }

.nature-card--or.is-selected .nature-card__icon,
.nature-card--vert.is-selected .nature-card__icon,
.nature-card--bleu.is-selected .nature-card__icon { color: #fff; transform: scale(1.05) rotate(-4deg); }

/* Met en avant la prestation la plus demandée (VTP côté voiture, CTM côté
   moto — voir NATURE_VEDETTES) : léger liseré doré au repos + ruban, sans
   aller jusqu'à l'aspect "sélectionné" pour ne pas prêter à confusion. */
.nature-card--vedette { border-color: #EED9AE; }
.nature-card__ribbon {
    position: absolute; top: -10px; left: 16px;
    /* color: var(--rdv-ink), pas #fff : le blanc sur cet ambre tombe autour
       de 2:1 de contraste, largement sous le seuil WCAG AA (4.5:1). */
    background: var(--rdv-gold); color: var(--rdv-ink);
    font-family: var(--rdv-font-mono); font-size: .62rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    padding: 3px 10px; border-radius: 999px;
    box-shadow: 0 4px 10px -3px rgba(var(--rdv-gold-rgb), .6);
}

/* --------------------------------------------------------------------------
   Étape "Véhicule" (Voiture / Moto) — grandes cartes dédiées, distinctes de
   .nature-card (bien plus petites) : c'est le tout premier choix du
   parcours, il doit avoir de la présence.
   -------------------------------------------------------------------------- */
/* auto-fit plutôt qu'un nombre de colonnes figé : 2 ou 3 cartes visibles
   selon les types gérés par le centre (voir appliquerCartesVehiculeDisponibles()). */
.vehicule-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
@media (max-width: 560px) { .vehicule-choice { grid-template-columns: 1fr; } }

.vehicule-choice__card {
    position: relative;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 14px;
    padding: clamp(28px, 5vw, 44px) 24px 32px;
    min-height: 260px;
    border: 2px solid var(--rdv-border);
    border-radius: calc(var(--r) + 6px);
    background: var(--rdv-white);
    cursor: pointer;
    overflow: hidden;
    transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.vehicule-choice__card::before {
    /* Filet décoratif du haut, dans l'esprit de la bande de signalisation
       déjà utilisée ailleurs sur le site (stripe-rule) — discret ici. */
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--rdv-accent), var(--rdv-ok));
    transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.vehicule-choice__card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
    border-color: #C9CACD;
}
.vehicule-choice__card.is-selected {
    border-color: var(--rdv-accent);
    box-shadow: var(--shadow-lg);
    background: linear-gradient(180deg, var(--rdv-accent-050) 0%, var(--rdv-white) 45%);
}
.vehicule-choice__card.is-selected::before { transform: scaleX(1); }

.vehicule-choice__badge {
    width: 108px; height: 108px; border-radius: 50%;
    display: grid; place-items: center; flex: none;
    background: linear-gradient(155deg, var(--rdv-accent-050), #E2E7F0);
    color: var(--rdv-accent);
    font-size: 3.1rem; line-height: 1;
    transition: all .35s var(--ease);
}
.vehicule-choice__card.is-selected .vehicule-choice__badge {
    background: linear-gradient(155deg, var(--rdv-accent), var(--rdv-accent-600));
    color: #fff;
    transform: scale(1.06);
    box-shadow: 0 14px 26px -10px rgba(var(--rdv-accent-rgb), .55);
}
.vehicule-choice__card:hover .vehicule-choice__badge { transform: scale(1.04) rotate(-3deg); }

.vehicule-choice__name {
    font-family: var(--rdv-font-display); font-weight: 800;
    font-size: 1.3rem; color: var(--rdv-heading);
}
.vehicule-choice__desc { font-size: .9rem; color: var(--rdv-muted); margin: -6px 0 0; }

.vehicule-choice__check {
    position: absolute; top: 16px; right: 16px;
    width: 30px; height: 30px; border-radius: 50%;
    border: 2px solid var(--rdv-border);
    display: grid; place-items: center; color: transparent; font-size: .85rem;
    background: var(--rdv-white);
    transition: all .25s ease;
}
.vehicule-choice__card.is-selected .vehicule-choice__check {
    background: var(--rdv-ok); border-color: var(--rdv-ok); color: #fff;
}

/* La carte "Moto" reprend la teinte chaude (voir --rdv-gold) plutôt que
   l'ardoise par défaut de "Voiture" — les deux choix restent ainsi
   distincts au premier coup d'œil, pas seulement par leur icône. */
.vehicule-choice__card[data-type="CL"] .vehicule-choice__badge {
    background: linear-gradient(155deg, var(--rdv-gold-050), #F5E2C4);
    color: var(--rdv-gold-600);
}
.vehicule-choice__card[data-type="CL"].is-selected {
    border-color: var(--rdv-gold);
    background: linear-gradient(180deg, var(--rdv-gold-050) 0%, var(--rdv-white) 45%);
}
.vehicule-choice__card[data-type="CL"].is-selected .vehicule-choice__badge {
    background: linear-gradient(155deg, var(--rdv-gold), var(--rdv-gold-600));
    box-shadow: 0 14px 26px -10px rgba(var(--rdv-gold-rgb), .55);
}
.vehicule-choice__card[data-type="CL"].is-selected::before {
    background: linear-gradient(90deg, var(--rdv-gold), var(--rdv-ok));
}

/* La carte "Poids lourd" reprend le bleu (voir --rdv-blue), 3e teinte
   distincte pour ne pas confondre les 3 choix quand ils sont tous les
   trois présents (voir NATURE_COULEURS pour le même bleu ailleurs). */
.vehicule-choice__card[data-type="PL"] .vehicule-choice__badge {
    background: linear-gradient(155deg, var(--rdv-blue-050), #D6E6F2);
    color: var(--rdv-blue-600);
}
.vehicule-choice__card[data-type="PL"].is-selected {
    border-color: var(--rdv-blue);
    background: linear-gradient(180deg, var(--rdv-blue-050) 0%, var(--rdv-white) 45%);
}
.vehicule-choice__card[data-type="PL"].is-selected .vehicule-choice__badge {
    background: linear-gradient(155deg, var(--rdv-blue), var(--rdv-blue-600));
    color: #fff;
    box-shadow: 0 14px 26px -10px rgba(var(--rdv-blue-rgb), .55);
}
.vehicule-choice__card[data-type="PL"].is-selected::before {
    background: linear-gradient(90deg, var(--rdv-blue), var(--rdv-ok));
}

/* --- Étape 2 : calendrier + créneaux --- */
.slot-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 22px; align-items: start; }
@media (max-width: 767.98px) { .slot-layout { grid-template-columns: 1fr; } }

.cal { position: relative; border: 1px solid var(--rdv-border); border-radius: var(--r); overflow: hidden; background: #fff; }
.cal__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 15px; background: var(--rdv-accent-050); border-bottom: 1px solid var(--rdv-border);
}
.cal__head strong { font-family: var(--rdv-font-display); font-size: .93rem; text-transform: capitalize; color: var(--rdv-accent-dark); }
.cal__nav { display: flex; gap: 4px; }
.cal__nav button {
    width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--rdv-border);
    background: #fff; display: grid; place-items: center; cursor: pointer;
    color: var(--rdv-heading); transition: all .2s ease;
}
.cal__nav button:hover:not(:disabled) { background: var(--rdv-accent); color: #fff; border-color: var(--rdv-accent); }
.cal__nav button:disabled { opacity: .3; cursor: not-allowed; }
@media (max-width: 575.98px) {
    /* Cibles tactiles plus confortables au pouce (recommandation usuelle
       ~44px) — 30px était trop juste pour naviguer d'un mois à l'autre
       sur mobile sans viser à deux fois. */
    .cal__nav button { width: 40px; height: 40px; }
}

.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 13px; }
.cal__dow { text-align: center; font-family: var(--rdv-font-mono); font-size: .62rem; color: var(--rdv-muted); padding-bottom: 5px; }
.cal__day {
    aspect-ratio: 1; border-radius: 9px; border: none; background: transparent;
    font-family: var(--rdv-font-body); font-size: .84rem; font-weight: 700; color: var(--rdv-heading);
    cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative;
    transition: all .18s ease;
}
.cal__day:disabled { color: #D3D4D6; cursor: not-allowed; }
.cal__day.is-empty { visibility: hidden; }
/* Point neutre = créneaux disponibles au tarif normal. Le vert (voir
   .has-promo ci-dessous, même couleur que .slot-btn.has-promo) reste
   réservé aux jours avec au moins une promo, pour ne pas s'y confondre. */
.cal__day.has-slots::after {
    content: ""; position: absolute; bottom: 5px; width: 5px; height: 5px; border-radius: 50%;
    background: var(--rdv-accent); box-shadow: 0 0 0 2px var(--rdv-accent-050);
}
.cal__day.has-promo::after {
    width: 6px; height: 6px; background: var(--rdv-ok);
    box-shadow: 0 0 0 2px var(--rdv-ok-050), 0 0 6px 0 rgba(23,185,97,.5);
}
.cal__day.has-slots:hover:not(:disabled) { background: var(--rdv-surface); }
.cal__day.has-promo:hover:not(:disabled) { background: var(--rdv-ok-050); }
.cal__day.is-selected { background: var(--rdv-accent); color: #fff; }
.cal__day.is-selected::after { background: #fff; box-shadow: none; }

.cal-legend { display: flex; gap: 16px; margin-top: 10px; }
.cal-legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--rdv-muted); }
.cal-legend__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cal-legend__dot--dispo { background: var(--rdv-accent); }
.cal-legend__dot--promo { background: var(--rdv-ok); box-shadow: 0 0 5px 0 rgba(23,185,97,.5); }

.slot-list-wrap { border: 1px solid var(--rdv-border); border-radius: var(--r); padding: 16px; min-height: 280px; background: #fff; }
.slot-list-wrap__title { font-family: var(--rdv-font-display); font-weight: 700; font-size: .93rem; color: var(--rdv-heading); margin-bottom: 3px; text-transform: capitalize; }
.slot-list-wrap__count { font-size: .76rem; color: var(--rdv-muted); margin: 0 0 12px; }
.slot-count-promo {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--rdv-ok); font-weight: 700; background: var(--rdv-ok-050);
    padding: 4px 10px; border-radius: 999px;
}
.slot-count-promo i { font-size: .78rem; }
.slot-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 9px; }
@media (max-width: 480px) { .slot-list { grid-template-columns: repeat(2, 1fr); } }
.slot-btn {
    position: relative; padding: 11px 9px 10px; border-radius: 12px; border: 1.5px solid var(--rdv-border);
    background: #fff; cursor: pointer; text-align: left; transition: all .2s var(--ease);
}
@media (max-width: 480px) { .slot-btn { padding: 13px 10px 12px; } }
.slot-btn:hover { border-color: var(--rdv-accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.slot-btn__time { display: block; font-family: var(--rdv-font-mono); font-weight: 700; font-size: .92rem; color: var(--rdv-heading); }
.slot-btn__price { display: block; font-family: var(--rdv-font-display); font-weight: 800; font-size: 1rem; color: var(--rdv-gold-600); margin-top: 2px; }
.slot-btn.has-promo { border-color: var(--rdv-ok); background: var(--rdv-ok-050); }
.slot-btn.has-promo .slot-btn__price { color: var(--rdv-ok); }
.slot-btn__promo {
    position: absolute; top: -8px; left: 9px;
    /* color: var(--rdv-ink), pas #fff : le blanc sur ce vert tombe autour
       de 2,9:1 de contraste, sous le seuil WCAG AA (4.5:1). */
    background: var(--rdv-ok); color: var(--rdv-ink); font-size: .62rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px;
    box-shadow: 0 3px 8px -2px rgba(46,125,91,.55);
}
.slot-btn__price-old {
    display: inline; font-family: var(--rdv-font-mono); font-size: .74rem; color: var(--rdv-muted);
    text-decoration: line-through; margin-right: 5px;
}
.slot-btn.is-selected { background: var(--rdv-accent); border-color: var(--rdv-accent); }
.slot-btn.is-selected.has-promo { background: var(--rdv-accent); border-color: var(--rdv-accent); }
.slot-btn.is-selected .slot-btn__time { color: rgba(255,255,255,.7); }
.slot-btn.is-selected .slot-btn__price { color: #fff; }
.slot-btn.is-selected .slot-btn__price-old { color: rgba(255,255,255,.55); }
.slot-btn.is-selected::after {
    content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; top: 7px; right: 8px;
    color: #fff; font-size: .74rem;
}
.slot-empty { text-align: center; color: var(--rdv-muted); font-size: .88rem; padding: 55px 10px; }
.slot-empty i { display: block; font-size: 1.8rem; margin-bottom: 10px; color: var(--rdv-border); }

/* --- Étape 3 : options, volontairement discrètes (peu utilisées) --- */
.presta-intro { font-size: .84rem; color: var(--rdv-muted); margin-bottom: 16px; }
.presta-list { display: flex; flex-direction: column; gap: 8px; }
.presta-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border: 1px solid var(--rdv-border); border-radius: var(--r-sm);
    cursor: pointer; transition: all .2s var(--ease); background: var(--rdv-white);
}
.presta-item:hover { border-color: var(--rdv-accent); }
.presta-item.is-selected { border-color: var(--rdv-accent); background: var(--rdv-accent-050); }
.presta-item__toggle {
    width: 20px; height: 20px; border-radius: 7px; border: 2px solid var(--rdv-border);
    display: grid; place-items: center; color: transparent; flex: none; font-size: .68rem;
    transition: all .2s ease;
}
.presta-item.is-selected .presta-item__toggle { background: var(--rdv-accent); border-color: var(--rdv-accent); color: #fff; }
.presta-item__icon {
    width: 36px; height: 36px; border-radius: 10px; flex: none;
    display: grid; place-items: center; font-size: 1rem;
    background: var(--rdv-accent-050); color: var(--rdv-accent);
    transition: all .2s ease;
}
.presta-item.is-selected .presta-item__icon { background: var(--rdv-accent); color: #fff; }
.presta-item__body { flex: 1; }
.presta-item__name { font-weight: 600; color: var(--rdv-heading); font-size: .88rem; }
.presta-item__price { font-family: var(--rdv-font-mono); font-weight: 700; color: var(--rdv-body); font-size: .86rem; }
.presta-skip-hint {
    display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 11px 14px;
    background: var(--rdv-surface); border-radius: var(--r-sm); font-size: .82rem; color: var(--rdv-body);
}
.presta-skip-hint i { color: var(--rdv-muted); }

/* --- Étape 4 : formulaire --- */
.hold-banner {
    display: flex; align-items: center; gap: 9px;
    background: var(--rdv-gold-050); color: var(--rdv-gold-600);
    padding: 9px 15px; border-radius: 999px; font-size: .8rem; font-weight: 600;
    margin-bottom: 20px; width: fit-content;
}
.hold-banner i { color: var(--rdv-gold); }
.hold-banner strong { font-family: var(--rdv-font-mono); color: var(--rdv-gold-600); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 575.98px) { .form-grid { grid-template-columns: 1fr; } }
.field label { display: block; font-size: .78rem; font-weight: 700; color: var(--rdv-heading); margin-bottom: 6px; }
.field input, .field select, .field textarea {
    width: 100%; padding: .7rem .85rem; border-radius: 11px; border: 1.5px solid var(--rdv-border);
    font-family: inherit; font-size: 1rem; color: var(--rdv-heading); background: #fdfdfd;
    transition: all .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--rdv-accent); background: #fff; box-shadow: 0 0 0 3px var(--rdv-accent-050);
}
.field.has-error input { border-color: var(--rdv-warn); background: var(--rdv-warn-050); }
.field__error { font-size: .74rem; color: var(--rdv-warn); margin-top: 4px; display: none; }
.field.has-error .field__error { display: block; }
/* Obligatoire piloté par appliquerChampsObligatoires() (rendez-vous-en-ligne.js),
   d'après le planning VTWEB — voir CHAMPS_VTWEB_VERS_DOM. */
.field--required label::after { content: " *"; color: var(--rdv-accent); }

/* --- Étape 5 : paiement --- */
.paiement-card {
    background: var(--rdv-white); border: 1px solid var(--rdv-border); border-radius: var(--r);
    padding: 20px; box-shadow: var(--shadow-sm);
}
.paiement-erreur { color: var(--rdv-warn); margin-top: 12px; font-size: .86rem; }
.paiement-consentements { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.consentement-item {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: .82rem; color: var(--rdv-body); line-height: 1.4; cursor: pointer;
}
.consentement-item input[type="checkbox"] {
    margin-top: 2px; width: 18px; height: 18px; flex: none; accent-color: var(--rdv-accent); cursor: pointer;
}
.consentement-item a { color: var(--rdv-accent-dark); font-weight: 700; text-decoration: underline; }
.consentement-item a:hover { color: var(--rdv-accent); }
.btn-payer-cta {
    width: 100%; margin-top: 18px;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: .8rem 1.3rem; border: none; border-radius: var(--r);
    background: linear-gradient(135deg, var(--rdv-accent), var(--rdv-accent-600));
    color: #fff; font-family: var(--rdv-font-display); font-weight: 800; font-size: .96rem;
    letter-spacing: -.01em; cursor: pointer;
    box-shadow: 0 12px 24px -12px rgba(var(--rdv-accent-rgb), .55);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), opacity .2s ease;
}
.btn-payer-cta i { font-size: .92rem; }
.btn-payer-cta:not(:disabled) { animation: payerCtaPulse 2.4s ease-in-out infinite; }
.btn-payer-cta:hover:not(:disabled) {
    animation: none; color: #fff; transform: translateY(-1px);
    box-shadow: 0 16px 30px -12px rgba(var(--rdv-accent-rgb), .7);
}
.btn-payer-cta:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
@keyframes payerCtaPulse {
    0%, 100% { box-shadow: 0 12px 24px -12px rgba(var(--rdv-accent-rgb), .55); }
    50% { box-shadow: 0 16px 34px -9px rgba(var(--rdv-accent-rgb), .8); }
}
@media (prefers-reduced-motion: reduce) {
    .btn-payer-cta:not(:disabled) { animation: none; }
}
.paiement-footnote {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 16px 0 0; font-size: .8rem; color: var(--rdv-muted);
}
.paiement-trust { margin-top: 16px; margin-bottom: 0; }

/* --- Étape 6 : confirmation façon "billet" --- */
.ticket {
    max-width: 440px; margin: 0 auto;
    background: linear-gradient(155deg, var(--rdv-accent-dark), var(--rdv-ink)); border-radius: var(--r-lg);
    color: #fff; overflow: hidden; box-shadow: var(--shadow-lg);
    animation: ticketPop .5s var(--ease);
}
@keyframes ticketPop { from { opacity: 0; transform: scale(.95) translateY(8px); } to { opacity: 1; transform: none; } }
.ticket__top { padding: 26px 26px 20px; text-align: center; }
.ticket__badge {
    width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 14px;
    display: grid; place-items: center; background: rgba(46,125,91,.22); color: #6FCFA5;
    font-size: 1.5rem;
}
.ticket__top h2 { color: #fff; font-size: 1.12rem; margin-bottom: 5px; }
.ticket__top p { margin: 0; font-size: .84rem; color: rgba(255,255,255,.6); }
.ticket__perf {
    position: relative; height: 1px;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 8px, transparent 8px 16px);
}
.ticket__perf::before, .ticket__perf::after {
    content: ""; position: absolute; top: -9px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--rdv-surface);
}
.ticket__perf::before { left: -9px; }
.ticket__perf::after { right: -9px; }
.ticket__body { padding: 20px 26px 26px; }
.ticket__row { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; border-bottom: 1px dashed rgba(255,255,255,.13); font-size: .86rem; }
.ticket__row:last-of-type { border-bottom: 0; }
.ticket__row span:first-child { color: rgba(255,255,255,.5); }
.ticket__row span:last-child { color: #fff; font-weight: 700; text-align: right; }
/* Le montant se distingue des autres lignes (prestation/date/heure) : c'est
   l'info que le client vérifie en premier sur son billet. */
#tkPrix { color: var(--rdv-gold); font-size: 1.05rem; }
.ticket__price-old {
    display: inline-block; font-family: var(--rdv-font-mono); font-size: .78rem; font-weight: 600;
    color: rgba(255,255,255,.4); text-decoration: line-through; margin-right: 7px;
}
.ticket__ref { margin-top: 16px; text-align: center; font-family: var(--rdv-font-mono); font-size: .76rem; color: rgba(255,255,255,.45); }
.ticket__ref strong { color: #fff; font-size: .9rem; }
.confirm-actions { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }

/* --------------------------------------------------------------------------
   Panneau latéral : récapitulatif + aide/téléphone + localisation
   -------------------------------------------------------------------------- */
.rdv-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 20px; }
@media (max-width: 900px) { .rdv-side { position: static; margin-top: 18px; } }

.recap-card {
    background: var(--rdv-white); border: 1px solid var(--rdv-border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm); padding: 20px; border-top: 3px solid var(--rdv-accent);
}
.recap-card__title { font-family: var(--rdv-font-mono); font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; color: var(--rdv-muted); margin-bottom: 14px; }
.recap-line { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--rdv-border); }
.recap-line:last-of-type { border-bottom: 0; }
.recap-line__icon { width: 32px; height: 32px; border-radius: 9px; background: var(--rdv-accent-050); color: var(--rdv-accent); display: grid; place-items: center; font-size: .9rem; flex: none; transition: all .3s ease; }
.recap-line.is-filled .recap-line__icon { background: var(--rdv-accent); color: #fff; }
.recap-line__label { font-size: .7rem; color: var(--rdv-muted); margin-bottom: 2px; }
.recap-line__value { font-size: .86rem; font-weight: 700; color: var(--rdv-heading); }
.recap-line__value.is-empty { color: var(--rdv-muted); font-weight: 500; }
.recap-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 13px; padding-top: 14px; border-top: 2px solid var(--rdv-gold); }
.recap-total span:first-child { font-family: var(--rdv-font-display); font-weight: 700; font-size: .86rem; }
.recap-total strong { font-family: var(--rdv-font-display); font-size: 1.4rem; color: var(--rdv-gold-600); }
.recap-total__old {
    display: inline-block; font-family: var(--rdv-font-mono); font-size: .8rem; font-weight: 600;
    color: var(--rdv-muted); text-decoration: line-through; margin-right: 8px; vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Récapitulatif inline de l'étape "Coordonnées" — voir renderCoordsRecap().
   Placé dans le panneau lui-même (pas #rdvSide) pour rester visible juste
   avant le bouton "Continuer" quel que soit le viewport.
   -------------------------------------------------------------------------- */
.coords-recap {
    margin-top: 22px; background: var(--rdv-accent-050); border: 1px solid var(--rdv-border);
    border-radius: var(--r-lg); padding: 16px 18px;
}
.coords-recap__title {
    display: flex; align-items: center; gap: 8px; font-family: var(--rdv-font-mono);
    font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rdv-accent-600);
    margin-bottom: 12px;
}
.coords-recap__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 20px;
}
.coords-recap__item { display: flex; flex-direction: column; gap: 2px; }
.coords-recap__label { font-size: .68rem; color: var(--rdv-muted); }
.coords-recap__value { font-size: .88rem; font-weight: 700; color: var(--rdv-heading); }
.coords-recap__value.is-empty { color: var(--rdv-muted); font-weight: 500; font-style: italic; }

/* Panneau d'aide sombre, dans l'esprit de la maquette de référence :
   un bloc contrasté qui rassure ceux qui préfèrent appeler plutôt que
   continuer en ligne. */
.help-card {
    background: linear-gradient(155deg, var(--rdv-accent-dark), var(--rdv-ink)); border-radius: var(--r-lg); padding: 20px;
    color: #fff; box-shadow: var(--shadow-sm);
}
.help-card__eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--rdv-font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255,255,255,.55); margin-bottom: 8px;
}
.help-card h3 { color: #fff; font-size: 1rem; margin-bottom: 8px; }
.help-card p { font-size: .82rem; color: rgba(255,255,255,.62); margin: 0 0 16px; }
.help-card__row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.12); }
.help-card__row i { color: var(--rdv-accent-050); font-size: .95rem; opacity: .75; }
.help-card__row-label { font-size: .7rem; color: rgba(255,255,255,.5); }
.help-card__row-value { font-size: .86rem; font-weight: 700; color: #fff; }
.help-card__cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-top: 14px; padding: .75rem 1rem; border-radius: 999px;
    background: #fff; color: var(--rdv-accent-dark); font-weight: 700; font-size: .88rem;
    border: none; cursor: pointer; transition: all .2s ease;
}
.help-card__cta:hover { background: var(--rdv-accent-050); }

.locate-card {
    background: var(--rdv-white); border: 1px solid var(--rdv-border); border-radius: var(--r-lg);
    padding: 16px; display: flex; align-items: center; gap: 12px;
}
.locate-card__icon {
    width: 38px; height: 38px; border-radius: 10px; background: var(--rdv-ink); color: #fff;
    display: grid; place-items: center; font-size: 1rem; flex: none;
}
.locate-card__eyebrow { font-family: var(--rdv-font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rdv-muted); margin-bottom: 3px; }
.locate-card__text { font-size: .84rem; font-weight: 600; color: var(--rdv-heading); line-height: 1.35; }

/* --------------------------------------------------------------------------
   Barre d'actions
   -------------------------------------------------------------------------- */
.rdv-actions { display: flex; align-items: center; justify-content: space-between; padding: 18px 32px 26px; border-top: 1px solid var(--rdv-border); }
.rdv-actions:empty { display: none; }
@media (max-width: 575.98px) { .rdv-actions { padding: 15px 16px 20px; flex-wrap: wrap; gap: 10px; } }

/* --------------------------------------------------------------------------
   Barre d'actions fixée en bas d'écran sur mobile : sur un parcours aussi
   long (formulaire, calendrier, options), faire remonter le bouton
   principal tout en bas du contenu obligeait à chercher où il se trouvait
   à chaque étape. En le fixant au bas de l'écran (comme la plupart des
   parcours de réservation/paiement mobiles), l'action à faire reste
   toujours à portée de pouce, quelle que soit la longueur de l'étape en
   cours.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .rdv-actions:not(:empty) {
        position: fixed; left: 0; right: 0; z-index: 30;
        /* Contrairement à VL_2026 (dont ce fichier est porté), ce thème
           n'a pas de barre fixe mobile "Appeler" (.mobile-bar) — rien
           d'autre à empiler en bas d'écran, la barre va donc jusqu'à 0. */
        bottom: 0;
        background: var(--rdv-white);
        border-top: 1px solid var(--rdv-border);
        box-shadow: 0 -12px 28px -18px rgba(var(--rdv-ink-rgb), .35);
        padding: 10px 16px;
        flex-direction: column-reverse; align-items: stretch; gap: 8px;
    }
    .rdv-actions:not(:empty) > div { display: flex; flex-direction: column; gap: 8px; width: 100%; }
    .rdv-actions:not(:empty) .btn { width: 100%; justify-content: center; }
    /* Le bouton principal (Continuer / Confirmer le rendez-vous / Passer
       au paiement) reprend le traitement "gros bouton" du paiement
       (.btn-payer-cta) plutôt que la pastille discrète utilisée sur
       desktop — c'est l'action attendue à chaque étape, elle doit se
       repérer d'un coup d'œil sur mobile. */
    .rdv-actions:not(:empty) .btn-accent {
        padding: .95rem 1.2rem; font-size: 1rem; font-family: var(--rdv-font-display); font-weight: 800;
        border-radius: var(--r);
        background: linear-gradient(135deg, var(--rdv-accent), var(--rdv-accent-600));
        box-shadow: 0 12px 24px -12px rgba(var(--rdv-accent-rgb), .55);
    }
    /* "Retour" redevient un simple lien discret sous le bouton principal
       (pas une pastille de même poids visuel) — sur mobile, deux boutons
       de même importance créaient une hésitation sur lequel appuyer. */
    .rdv-actions:not(:empty) .btn-ghost {
        background: transparent; border: none; box-shadow: none;
        color: var(--rdv-muted); font-size: .85rem; padding: .35rem; width: auto; align-self: center;
    }
    .rdv-shell:has(.rdv-actions:not(:empty)) .rdv-body {
        /* Une seule barre fixe ici (pas de .mobile-bar dans ce thème,
           voir ci-dessus) : généreux quand même pour couvrir le cas le
           plus haut (étape "Options", bouton "Passer cette étape" en
           plus du bouton principal). Un peu trop d'espace vaut mieux
           qu'un bouton qui recouvre la fin du contenu. */
        padding-bottom: 160px;
    }
}

/* Toutes les règles ci-dessous sont préfixées par .rdv-wrap (le conteneur
   de toute la page de réservation, voir rendez-vous-en-ligne.tpl) : .btn
   et .btn-primary sont aussi de VRAIS noms de classe Bootstrap, utilisés
   ailleurs sur cette même page (ex. la flèche "retour en haut", .back-to-top,
   qui porte "btn btn-primary") — sans ce préfixe, ces règles s'appliquaient
   à TOUT élément Bootstrap .btn-primary de la page, pas seulement aux
   boutons du parcours de réservation. Incident constaté le 2026-09-11 :
   flèche "retour en haut" recolorée/redimensionnée par erreur. */
.rdv-wrap .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--rdv-font-body); font-weight: 700; font-size: .9rem; padding: .7rem 1.4rem; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: all .2s var(--ease); }
.rdv-wrap .btn-primary { background: var(--rdv-ink); color: #fff; }
/* color: #fff redéclaré ici (pas juste hérité de .btn-primary) : le .btn
   générique de Bootstrap fixe sa propre couleur au survol (spécificité
   plus élevée sur :hover que notre règle de base sans :hover), qui sinon
   l'emporte et rend le texte du bouton quasi invisible au survol. */
.rdv-wrap .btn-primary:hover { background: var(--rdv-ink-2); color: #fff; transform: translateY(-1px); }
.rdv-wrap .btn-accent { background: var(--rdv-accent); color: #fff; box-shadow: 0 10px 22px -12px rgba(var(--rdv-accent-rgb), .6); }
.rdv-wrap .btn-accent:hover:not(:disabled) { background: var(--rdv-accent-600); color: #fff; transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(var(--rdv-accent-rgb), .7); }
.rdv-wrap .btn-accent:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
.rdv-wrap .btn-ghost { background: transparent; color: var(--rdv-body); border-color: var(--rdv-border); }
.rdv-wrap .btn-ghost:hover { border-color: var(--rdv-heading); color: var(--rdv-heading); background: var(--rdv-surface); }
@media (max-width: 420px) {
    /* La mise en pile de .rdv-actions elle-même est gérée par la barre
       fixe mobile plus bas (@media 767.98px) — ne reste ici que le cas
       générique des autres boutons pleine largeur (ex: billet de
       confirmation, .confirm-actions) sur très petit écran.
       .rdv-wrap : comme les autres règles .btn de ce fichier, sans ce
       préfixe cette règle s'appliquait à TOUT .btn de la page — dont la
       flèche "retour en haut" (.back-to-top, "btn btn-primary"), étirée
       en pleine largeur sur les petits écrans au lieu de rester ronde. */
    .rdv-wrap .btn { justify-content: center; width: 100%; }
}

/* Sur mobile uniquement, la flèche "retour en haut" (.back-to-top, voir
   footer.tpl) chevauche la barre d'action collante en bas de cette page
   (bouton "Continuer"/"Payer...") — gênant sur un parcours déjà dense en
   boutons. .rdv-wrap n'existe que sur cette page (voir
   rendez-vous-en-ligne.tpl) : le sélecteur de frère général la cible sans
   affecter la flèche sur le reste du site ni sur cette page en desktop. */
@media (max-width: 767.98px) {
    .rdv-wrap ~ .back-to-top { display: none !important; }
}

/* --------------------------------------------------------------------------
   États transverses
   -------------------------------------------------------------------------- */
.rdv-loading { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 70px 10px; color: var(--rdv-body); font-size: .88rem; font-weight: 600; }

/* Loader "volant" — sur le thème du contrôle technique auto plutôt qu'un
   spinner générique. Un léger halo pulsé derrière renforce l'impression
   de mouvement/moteur qui tourne, dans le même esprit que les glows
   accent-050 déjà utilisés ailleurs sur la page (icônes de nature, etc.). */
.wheel-loader-wrap { position: relative; width: 64px; height: 64px; display: grid; place-items: center; }
.wheel-loader-wrap::before {
    content: ""; position: absolute; inset: -12px; border-radius: 50%;
    background: radial-gradient(circle, var(--rdv-accent-050) 0%, transparent 70%);
    animation: wheelGlow 1.2s ease-in-out infinite;
}
.wheel-loader { width: 56px; height: 56px; position: relative; animation: wheelSpin 2.6s linear infinite; }
.wheel-loader--sm { width: 34px; height: 34px; }
@keyframes wheelSpin { to { transform: rotate(360deg); } }
@keyframes wheelGlow {
    0%, 100% { opacity: .45; transform: scale(.88); }
    50% { opacity: 1; transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
    .wheel-loader { animation-duration: 2.8s; }
    .wheel-loader-wrap::before { animation: none; opacity: .6; }
}

/* Petit loader local pour le changement de mois du calendrier, sans
   masquer l'étape entière (voir naviguerMois). */
.cal-loading {
    position: absolute; inset: 0; z-index: 5;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .85); border-radius: var(--r);
}

.rdv-alert { display: flex; gap: 10px; padding: 12px 15px; border-radius: var(--r-sm); font-size: .84rem; margin-bottom: 16px; }
.rdv-alert-error { background: var(--rdv-warn-050); color: var(--rdv-warn); }
.rdv-alert-warn { background: #FFF6E0; color: #8A6100; }
.rdv-alert i { flex: none; margin-top: 1px; }

/* --------------------------------------------------------------------------
   Impression : tout tenir sur une seule page, uniquement le billet
   -------------------------------------------------------------------------- */
@media print {
    body * { visibility: hidden; }
    .ticket, .ticket * { visibility: visible; }
    .ticket {
        position: absolute; top: 0; left: 0; right: 0; margin: 0 auto;
        box-shadow: none; max-width: 100%; page-break-inside: avoid;
    }
    .confirm-actions, .rdv-actions, .page-hero, header, footer, .rdv-side { display: none !important; }
    @page { margin: 1.2cm; }
}